<template>
  <div class="step-item">
    <div class="step-item-content" :class="{ disabled: disabled }" @click="onClick">
      <slot></slot>
    </div>
    <slot name="without-event"></slot>
  </div>
</template>

<script>
export default {
  name: 'StepItem',
  inject: ['onStepClick'],
  components: {},
  props: {
    idx: {
      type: Number,
    },
    disabled: {
      type: Boolean,
    },
  },
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {
    onClick() {
      console.log('onClick...', this.idx)
      if (!this.disabled) {
        this.onStepClick && this.onStepClick(this.idx)
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.step-item {
  .step-item-content {
    cursor: pointer;
    &.disabled {
      cursor: initial;
    }
  }
}
</style>
